<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "fileInput",
  props: {
    fileType: String
  },
  methods:{
    getFile(){
      this.$refs.fileNode.click()
    },
    inputFileHandler(e){
      const files = e.target.files
      for (const file of files) {
        const {type} = file
        if (this.fileType && (type.indexOf(this.fileType) === -1)) {
          return this.$errorMessage("文件类型不匹配")
        }
      }
      this.$emit("inputFile", files)
    }
  }
})
</script>

<template>
  <div>
    <el-button type="primary" @click="getFile">
      <slot></slot>
    </el-button>
    <input type="file" @input="inputFileHandler" ref="fileNode" style="display: none">
  </div>

</template>

<style scoped>

</style>